<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe</title>
  </head>
  <body>
    <!-- <iframe
      src="https://www.taobao.com"
      frameborder="0"
      style="width: 100vw; height: 100vh"
    ></iframe> -->
    <!-- 
      同源：协议名、域名、端口号三者必须完全一致

      同源情况：
     -->
    <!-- <h1>父页面</h1>
    <iframe
      src="./02.origin-iframe.html"
      frameborder="0"
      id="originIframe"
    ></iframe>
    <script>
      const originIframe = document.getElementById("originIframe");
      console.log(originIframe.contentWindow); // 子页面的window对象

      // 父页面操作子页面的内容
      // 等子页面加载完毕，在获取DOM元素
      originIframe.contentWindow.onload = function () {
        const h1 = originIframe.contentWindow.document.querySelector("h1");
        console.log(h1);
      };
    </script> -->
    <!-- 不同源情况 -->
    <h1>父页面</h1>
    <iframe
      src="http://127.0.0.1:5501/02.origin-iframe.html"
      frameborder="0"
      id="originIframe"
    ></iframe>
    <script>
      // console.log(originIframe.contentWindow); // 子页面的window对象
      // 不同源情况下，浏览器只提供部分功能，不包含操作DOM
      // originIframe.contentWindow.onload = function () {
      //   const h1 = originIframe.contentWindow.document.querySelector("h1");
      //   console.log(h1); // null
      // };
      const originIframe = document.getElementById("originIframe");
      const h1 = document.querySelector("h1");
      h1.onclick = function () {
        // 父页面向子页面发送消息
        originIframe.contentWindow.postMessage(
          "hello 子页面",
          "http://127.0.0.1:5501"
        );
      };

      // 父页面接受子页面的消息
      window.onmessage = function (e) {
        console.log(e.data);
      };
    </script>
  </body>
</html>
